<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>详情</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header_img">
                <img src="./Images/back.png">
            </div>
            <div class="header_img_main">
                <div>详情</div>
                <div>商品</div>
                <div>推荐</div>
            </div>
            <div class="header_upload_more">
                <img src="./Images/upload.png">
                <img src="./Images/more.png">
            </div>
        </div>
        <div class="backgroundPhoto">
            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.64533728.png">
        </div>
        <div class="price">
            <div class="price_box_one">
                <div class="price_box_one_title">
                    <h2> Xiaomi 12S Pro
                        <img src="./Images/upload.png">
                    </h2>
                </div>
                <div class="price_box_one_benefits">
                    &nbsp; &nbsp; &nbsp;忠于徕卡百年品质，敬呈感动人心之作
                    历经徕卡联合研发，续写原汁原味的经典影像
                    细致入微的精妙体验，处处可见
                    沉浸式创作氛围，时时到位
                    专业徕卡影像，专为你的全心期待
                </div>
                <div class="price_box_one_characteristic">
                    <div class="price_box_one_characteristic_in">
                        <img src="./Images/1.png">
                        &nbsp;&nbsp;&nbsp; <span>[性能大升级] 天玑810，享六期优惠</span>
                    </div>
                    <div class="price_box_one_characteristic_in">
                        <img src="./Images/2.png">
                        &nbsp;&nbsp;&nbsp; [性能大升级] 天玑810，享六期优惠
                    </div>
                    <div class="price_box_one_characteristic_in">
                        <img src="./Images/3.png">
                        &nbsp;&nbsp;&nbsp;[性能大升级] 天玑810，享六期优惠
                    </div>
                </div>
            </div>
            <div class="price_box_two">
                <div class="price_box_two_in">
                    <img src="./Images/cpu.png">
                    <div>
                        CPU
                    </div>
                    <div>
                        天玑&nbsp;810
                    </div>
                </div>
                <div class="price_box_two_in">
                    <img src="./Images/Camera.png">
                    <div>
                        双摄像头
                    </div>
                    <div>
                        5000+8000
                    </div>
                </div>
                <div class="price_box_two_in">
                    <img src="./Images/screenDisplay.png">
                    <div>
                        超大屏
                    </div>
                    <div>
                        6.6&nbsp;英寸
                    </div>
                </div>
                <div class="price_box_two_in">
                    <img src="./Images/thickness.png">
                    <div>
                        普通厚度
                    </div>
                    <div>
                        8.75&nbsp;mm
                    </div>
                </div>
                <div class="price_box_two_in">
                    <img src="./Images/stockpile.png">
                    <div>
                        储存容量
                    </div>
                    <div>
                        最高&nbsp;256G
                    </div>
                </div>
            </div>
        </div>
        <div class="choice">
            <div class="choice_title">
                <h1>精选推荐</h1>
                <div class="choice_img">
                    <img src="./Images/concerate1.jpg">
                    <img src="./Images/concorate2.jpg">
                    <img src="./Images/concerate3.jpg">
                </div>
            </div>
            <div class="choice_img"></div>
        </div>
        <div class="footer">
            <div class="footer_l">
                <div class="footer_l_in">
                    <img src="./Images/service.png">
                    <div class="footer_l_service">客服</div>
                </div>
                <div class="footer_l_in">
                    <img src="./Images/collet.png">
                    <div class="footer_l_service">收藏</div>
                </div>
                <div class="footer_l_in">
                    <img src="./Images/shoppingCar.png">
                    <div class="footer_l_service">购物车</div>
                </div>
            </div>
            <div class="footer_r">
                <button>
                    <div class="footer_r_button_in footer_r_button_in_l">加入购物车</div>
                    <div class="footer_r_button_in footer_r_button_in_r">立即购买</div>
                </button>
            </div>
        </div>
    </div>
    <script>
        var img = localStorage.getItem('img')
        console.log(img)
        var title = localStorage.getItem('title')
        var background = document.querySelector('.backgroundPhoto')
        var orgin = background.querySelector('img')
        
        console.log(orgin.src)
        orgin.src=img
        console.log(orgin.src)
        if (title != '') {
            var orignTitle = document.querySelector('.price_box_one_title')
            var h2 = orignTitle.querySelector('h2')
            h2.innerText = title
        }
        var goIndex = document.querySelector('.header_img')
        goIndex.addEventListener('click', function () {
            location.href = './Index.html'
        })
    </script>
</body>
<link rel="stylesheet" href="./css/Concrete.css">

</html>